<template>
    <ChartWrapper ref="wrapper" :option="option" />
</template>
<script setup>      
    import { watch, reactive, ref, onMounted } from 'vue';
    import ChartWrapper from '@/components/ChartWrapper.vue';
    import { getTaskFinishRatio } from '@/api/board.js';
    const props = defineProps({
        fontSize:{ type:Number }
    })
    const option = ref({});
    const wrapper = ref();
    const sourceData = ref({});
    function render(isDelay){
            if ( !sourceData.value.hasOwnProperty('<1小时占比') ) return;
            let less1Hour = sourceData.value['<1小时占比'];
            let less2Hour = sourceData.value['<2小时占比'];
            let less4Hour = sourceData.value['<4小时占比'];
            let less12Hour = sourceData.value['<12小时占比'];
            let than12Hour = sourceData.value['>12小时占比'];
            
            let finishHour = sourceData.value['按时完成占比'] ;
            let unfinishHour = sourceData.value['未完成占比'];

            let unfinishHour2 = sourceData.value['未按时完成占比'];
            if ( !wrapper.value ) return;
            let myChart = wrapper.value.instance;
           
            let pieData = [
                {value: unfinishHour,name: 'inner',itemStyle:{ 
                    color:{
                        type:'linear',
                        x:0,
                        y:0,
                        x2:0,
                        y2:1,
                        colorStops: [{
                            offset: 0, color: '#ff8447' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#fb3748' // 100% 处的颜色
                        }],
                    }   
                }},
                {value: finishHour, name: 'part',itemStyle:{
                    color:{
                        type:'linear',
                        x:0,
                        y:0,
                        x2:1,
                        y2:0,
                        colorStops: [{
                            offset: 0, color: '#1fc16b' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#2cce78' // 100% 处的颜色
                        }],
                    } 
                }}
            ]
            let pieTotal = pieData.reduce((total,item)=>{
                return total + item.value;
            },0)
            let pieInnerRate = pieData[0].value/pieTotal ;
            let partData = [
                {real: less1Hour,value:10,name: '<1小时占比',itemStyle: {color: "rgba(251, 55, 72, 0.7)",}},
                {real: less2Hour,value:10,name: '<2小时占比',itemStyle: {color: "rgba(251, 55, 72, 0.6)",}},
                {real: less4Hour,value:10,name: '<4小时占比',itemStyle: {color: "rgba(251, 55, 72, 0.5)",}},
                {real: less12Hour,value:10,name: '<12小时占比',itemStyle: {color: "rgba(251, 55, 72, 0.4)",}},
                {real: than12Hour,value:10,name: '>12小时占比',itemStyle: {color: "rgba(251, 55, 72, 0.3)",}},
            ]
            let boxConfig = {
                width:myChart.getWidth(),
                height:myChart.getHeight(),
                circleWidth1:0.5,
                circleWidth2:0.6,
                moreLeft: 0.5,
                moreRight: 0.2,
                moreTop: 0.2,
                moreBottom: 0.2
            }
            let pieRL= (boxConfig.width/4 > boxConfig.height/2?boxConfig.height/2:boxConfig.width/4);
            let pieRWidth = pieRL*boxConfig.circleWidth2;
            let pointsPosition = [
                [
                    (0.25 * boxConfig.width + pieRWidth*Math.cos(pieInnerRate/2*2*Math.PI)),
                    (0.5 * boxConfig.height - pieRWidth*Math.sin(pieInnerRate/2*2*Math.PI))
                ],[
                    (boxConfig.moreLeft * boxConfig.width),
                    (boxConfig.moreTop * boxConfig.height)
                ],[
                    (boxConfig.moreLeft * boxConfig.width), 
                    ((1-boxConfig.moreBottom) * boxConfig.height)
                ],[
                    (0.25 * boxConfig.width + pieRWidth*Math.cos(pieInnerRate/2*2*Math.PI)),
                    (0.5 * boxConfig.height + pieRWidth*Math.sin(pieInnerRate/2*2*Math.PI))
                ],[
                    unfinishHour > 55 ? (0.25 * boxConfig.width - pieRWidth) : (0.25 * boxConfig.width + pieRWidth),
                    (0.5 * boxConfig.height)
                ],
            ]
            const getPercentage = (number)=>{ return number*100+'%';}
            option.value = {
                legend: {
                    show: false,
                },
                tooltip: {
                    show: false,
                },
                xAxis: {
                    show:false,
                },
                yAxis: {
                    show:false,
                },
                graphic:{
                    type:'text',
                    left:getPercentage(boxConfig.moreLeft),
                    top:getPercentage(boxConfig.moreTop - 0.1),
                    style:{
                        text:`任务超时完成占比 ${ unfinishHour2 }%`,
                        textAlign:'center',
                        fill:'#FD5A47',
                        fontSize:props.fontSize * 1.2,
                    }
                },
                series: [{
                    left:0,
                    right:'50%',
                    top:0,
                    bottom:0,
                    startAngle:pieInnerRate/2 * 360,
                    name: '半径模式',
                    type: 'pie',
                    radius: [getPercentage(boxConfig.circleWidth1),getPercentage(boxConfig.circleWidth2)],
                    center: ['50%', '50%'],
                    data: pieData,
                    label: {
                        show:true,
                        position:'center',
                        formatter:(val)=>{
                            // let temp;
                            return `{value|${ finishHour }%}\n{unit|任务按时完成占比}`
                        },
                        textStyle:{
                            rich: {
                                unit: {
                                    fontSize:props.fontSize * 0.8,
                                    lineHeight:props.fontSize,
                                    color: '#fff'
                                },
                                value: {
                                    fontSize:props.fontSize * 1.8,
                                    fontWeight:'bold',
                                    lineHeight: props.fontSize * 2.5,
                                    color:'#27EBB6',
                                    padding:[0,4,0,0]
                                }
                            }
                        }
                    },
                    labelLine: {
                        show: false,
                    },        
                },{
                    left:getPercentage(boxConfig.moreLeft),
                    right: getPercentage(boxConfig.moreRight),
                    top:getPercentage(boxConfig.moreTop),
                    bottom:getPercentage(boxConfig.moreBottom),
                    type: 'funnel',
                    minSize:'100%',
                    data: partData,
                    itemStyle:{
                        borderWidth:1,
                        borderColor:'transparent'
                    },
                    label: {
                        show: true,
                        position:'inside',
                        color: '#FFF',
                        formatter:(params)=>{
                            return `{a|${params.data.name}}{b|${params.data.real}%}`
                        },
                        align:'left',
                        rich:{
                            a:{
                                fontSize:props.fontSize,
                                width:props.fontSize * 3,
                                // padding:[0, 20, 0, 0],
                                align:'left'
                            },
                            b:{
                                fontSize:props.fontSize * 1.2,
                                width:props.fontSize * 7,
                                fontWeight:'bold',
                                align:'right'
                            }
                        }
                    },
                    labelLine: {
                        show: false,
                    },
                },{
                  type: 'custom',
                  renderItem: function (params) {
                    if (params.context.rendered) {
                      return;
                    }
                    params.context.rendered = true;
                    return {
                      type: 'polygon',
                      shape: {
                        points: pointsPosition,
                      },
                      style: {
                        fill: 'rgba(251, 55, 72, .4)',
                        // stroke: 'rgba(0,122,255,1)',
                      },
                    };
                  },
                  clip: false,
                  data: []
                }]
            };
            // 延迟中间蒙版显示
            setTimeout(()=>{        
                myChart.appendData({
                    seriesIndex:'2',
                    data:[0]
                })
            },500)        
    }
    watch(()=>props.fontSize, ()=>{
        render();
    })
    onMounted(()=>{
        getTaskFinishRatio()
        .then(res=>{
            if ( res.data.code === 200 ) {
                
                sourceData.value = res.data.data;
                render(true);
                
            }
        })
        window.addEventListener('resize', ()=>{
            render(false);
        })
    })
</script>